<template>
  <div class="home-app">
    <el-tabs v-model="activeName" style="width: 100%">
      <el-tab-pane :label="comset.name" :name="index+''" v-for="(comset, index) in dataList" :key="index">
        <div class="item-list">
          <template v-for="(item, itemIndex) in comset.apps">
            <div
              class="menu-item"
              @click="goto(item.link)"
              :key="itemIndex"
              v-if="item.visible">

              <p class="icon-bg">
                <simple-image :src="`${item.icon}`" :is-preview="false"></simple-image>
              </p>
              <p>{{ item.name }}</p>
              <div class="num" v-if="item.num">{{item.num}}</div>
            </div>
          </template>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import dashboard from "@/api/dashboard/index";
  import app from "@/api/systemManagement/useful/app/index"
  import SimpleImage from "../../../components/Common/SimpleImage";
  import ScrollPanel from '../../../components/Common/ScrollPanel'

  export default {
    name: "HomeApp",
    components: {ScrollPanel, SimpleImage},
    data() {
      return {
        activeName: '0',
        menuList: [],
        dataList: [],
        numList: []
      }
    },
    created() {
      this.getTicketsJiaobiao();
      this.getList()
      //   this.checkAuth()

    },
    methods: {
      toMore() {

      },
      getList() {
        app.getComsetAppsList({client: 0}).then(res => {
          this.dataList = res.data;
          this.checkAuth()
        })
      },
      goto(url) {
        if (url == "/folderWeb" || url.indexOf("http") != -1) {
          window.open(url)
        } else {
          this.$router.push({path: url});
        }
      },
      checkAuth(menu) {
        let menus = this.$store.state.permission.menuData;
        let strMenus = JSON.stringify(menus)
        for (let i = 0; i < this.dataList.length; i++) {
          let menu = this.dataList[i].apps
          menu.forEach(item => {
            let url = item.link ? item.link.split("?")[0] : '';
            if (url.indexOf("http") != -1) item.visible = true;
            if (!item.visible) {
              let index = url.lastIndexOf("/") + 1;
              item.visible = strMenus.includes(url.substring(index, url.length) + '"');
              if (item.visible) {
                menus.forEach(menu => {
                  if (menu.web_path == url.substring(index, url.length)) {
                    item.color = menu.color
                  }
                });
                this.numList.map(numItem => {
                  if (item.workflow == numItem.workflow_id) {
                    item.num = numItem.num
                  }
                })
              }
            }
          });
          this.dataList[i].apps = menu.filter(item => {
            return item.visible
          });
        }
      },
      getTicketsJiaobiao() {
        dashboard.getTicketsJiaobiao().then(res => {
          this.numList = res.data
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "style.scss";

  .home-app {
    position: relative;
    width: 100%;
    height: 300px;
    background: white;
    margin: 15px 15px 15px 0px;
    padding: 7px 20px 15px 20px;

    .item-list {
      display: flex;
      flex-wrap: wrap;
      height: 220px;
      overflow-y: auto;

      .menu-item {
        position: relative;
        text-align: center;
        cursor: pointer;
        transition: 0.4s;
        border-bottom: 3px solid transparent;
        padding-bottom: 0px;
        width: 25%;

        p {
          margin: 10px auto;
          font-size: 14px;
        }

        .num {
          position: absolute;
          top: 15px;
          right: 30px;
          transform: translateY(-50%) translateX(100%);
          background-color: #f56c6c;
          border-radius: 10px;
          color: #fff;
          display: inline-block;
          font-size: 12px;
          height: 18px;
          line-height: 18px;
          padding: 0 6px;
          text-align: center;
          white-space: nowrap;
          border: 1px solid #fff;
        }
      }
    }

  }

  .icon-bg {
    width: 60px;
    height: 60px;
  }
</style>
